<template>
  <div id="course_user">
    <h3></h3>
    <el-form ref="showFrom" :model="form" label-width="80px">
      <el-form-item label="账号名称">
        <el-input v-model="username" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="退出登录">
        <el-button type="info" @click="logout()">退出登录</el-button>
      </el-form-item>
    </el-form>
    <br><br><br>
    <!-- 如果是学生用户显示该组件   -->
    <student-user-message v-if="this.$store.state.user.user.userType==1"></student-user-message>

  <br><br><br>
    <h3>修改密码</h3>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="账号名称">
        <el-input v-model="username" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="老密码">
        <el-input placeholder="请输入老密码" v-model="password" show-password></el-input>
      </el-form-item>

      <el-form-item label="新密码">
        <el-input placeholder="请输入新密码" v-model="passwordNew" show-password></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updatePwdForm()">修改密码</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
    import ElementUI from "element-ui";
    import Bus from "../course/bus";
    import { mapState } from "vuex";
    import StudentUserMessage from "./StudentUserMessage";
    export default {
        name: "course_user",
      // props: {
      //   userId :{type :String,require: true},
      //   userName :{type :String,require: true}
      // },
      components:{
        StudentUserMessage
      },
      data () {
        return {
          form:{},
        // userName:"111",
          password:"",
          passwordNew:""
          // }
        }
      },
      methods :{
        updatePwdForm(){
              //数据准备
            let passwordNew = this.passwordNew;
            let password = this.password;

              if(password==null||password==''){
                ElementUI.Message({
                  message: '密码不能为空',
                  type: 'err'
                });
                return
              }

            if(passwordNew==null||passwordNew==''){
              ElementUI.Message({
                message: '新密码不能为空',
                type: 'err'
              });
              return
            }

            if(passwordNew.length<6){
              ElementUI.Message({
                message: '密码长度要大于5位',
                type: 'err'
              });
              return;
            }

            let sendData = {'id':this.id,
                          'password':password,
                        'passwordNew':passwordNew}

          //修改密码
            this.$store.dispatch("user/updatePassword",sendData).then((res) => {
              ElementUI.Message({
                message: '更新成功',
                type: 'success'
              })
              this.password = ""
              this.passwordNew = ""
              //进入登录页面
              this.$router.push('/course/login')

            }).catch((e) => {
              console.log(e)
            });

        },
          logout(){
             this.$store.dispatch("user/logout").then((res) => {
               //进入登录页面
              this.$router.push('/course/login')
            }).catch((e) => {
              console.log(e)
            });
          },

      },created() {
        this.password = ''
        this.passwordNew=''
        Bus.$off('toCourseUserRefreshUserAction');//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toCourseUserRefreshUserAction', data => {
          // console.log("执行111")
          // this.refreshData();
        });

      },
      computed:{
        // ...mapState(["user.user.username",])
        ...mapState({
          'id': state => state.user.user.id,
          'username': state => state.user.user.username,
          // 'userType': state => state.user.user.userType,
        })
      },
      watch: {
          "username" (newName, oldName) {
            console.log(newName);
            console.log(oldName);
          }
      },
    }
</script>

<style scoped>
</style>
